<template>
  <div>
    <div class="top">
      <span class="title">大学生题库 | 吴彦组</span>
      <span class="text">在线搜题/自动生成试卷平台</span>
      <el-button type="warning" class="button1">
   <router-link :to="'/problem'"> <span id="tk">进入题库</span></router-link>
       
      </el-button>
      <el-button type="warning" class="button2">
        <span id="tk">了解更多</span>
      </el-button>
      <el-button type="info" class="button3">
        <span id="tk">登录</span>
      </el-button>
    </div>
    <div class="row" id="row">
      <div class="col-md-4" id="math">
        <img src="@/assets/images/搜索.png" id="img" />
        <br />
        <span id="label">搜索题目</span>
        <br />
        <span id="content">搜索查找你需要的题目，并有详细的题目解析</span>
      </div>
      <div class="col-md-4" id="math">
        <img src="@/assets/images/试卷.png" id="img" /><br>
        <span id="label">自动生成试卷</span>
        <br />
        <span id="content">选择自己需要的科目，自动生成试卷</span>
      </div>
      <div class="col-md-4" id="math">
        <img src="@/assets/images/图标.png" id="img" />
        <br />
        <span id="label">多种标签</span>
        <br />
        <span id="content">通过多种标签找到自己需要的题目</span>
      </div>
    </div>
    <div class="bottom">
      <span id="sologan">人生何处不见知音，题海众生，难觅传奇尽在其中</span>
            <el-button type="warning" class="button-4">
        <span id="tk">了解更多</span>
      </el-button>
                  <el-button  type="info" class="button-5">
        <span id="tk">进入我们</span>
      </el-button>
      <span id="bottom-text">@ 2022.10 wyz</span>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.top {
  background: url("../assets/images/bg2.jpg");
  background-size: cover;
  width: 100%;
  height: 650px;
}
.title {
  color: #121212;
  text-align: center;
  font-weight: 600;
  font-size: 70px;
  position: absolute;
  top: 23%;
  left: 31.5%;
}
.text {
  font-family: Microsoft YaHei;
  font-weight: 600;
  font-size: 20px;
  text-align: center;
  position: absolute;
  top: 40%;
  left: 43%;
}
.button1 {
  position: absolute;
  top: 50%;
  left: 40%;
  width: 120px;
  height: 50px;
}
.button2 {
  position: absolute;
  top: 50%;
  left: 48%;
  width: 120px;
  height: 50px;
}
.button3 {
  position: absolute;
  top: 50%;
  left: 56.6%;
  width: 80px;
  height: 50px;
}
.button-4{
  width: 120px;
  height: 50px;
  position: absolute;
  top: 1270px;
  left: 630px;
}.button-5{
  width: 120px;
  height: 50px;
  position: absolute;
  top: 1270px;
  left: 800px;
}
#tk {
  color: #121212;
  font-weight: 700;
  font-size: 16px;
}
#math {
  margin-top: 80px;
  padding-left: 160px;
  /* width: 10px;
  height: 10px; */
}
#label {
  font-size: 24px;
  text-align: center;
  font-weight: 600;
  line-height: 2.5em;
  text-transform: none;
  color: #2b2b2b;
}
#content {
  font-size: 15px;
  font-weight: 600;
  
}
#img {
  width: 150px;
  height: 150px;
}
.bottom{
  margin-top: 80px;
  background-color: #14171c;
  width: 100%;
  height: 450px;
}
#sologan{
  color: #ffffff;
  /* margin: 0px 0px 30px; */
  font-size: 40px;
  text-align: center;
  font-weight: 600;
  position: absolute;
  top: 1170px;
  left: 340px;
}
#bottom-text{
  color: #ffffff;
  font-size: 1.5em;
  font-weight: 500;
  text-align: center;
  font-weight: 600;
  position: absolute;
  top: 1450px;
  left: 700px;
}
#row{
   margin-left: 15px;
   margin-right: 15px;
}
.bottom {
    width: 100% !important;
}
</style>